<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>星型图案</title>
<style>
  body {
    font-family: 'Courier New', Courier, monospace;
    font-size: 30px;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #F7F7F7; 
  }
  .container {
    width: max-content;
    margin: 0 auto;
    background-color: rgb(243, 255, 175); 
    padding: 20px 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .star {
    font-size: inherit; 
    margin: 5px 0;
  }
  .blue {
    color: #0000FF; /* 蓝色星星 */
  }
  .red {
    color: #FF0000; /* 红色星星 */
  }
</style>
</head>
<body>
  <div class="container" id="star-container"></div>

  <script>
    // 星星的数量和对应的字符，上下对称
    const stars = [
      '★',
      '★★★',
      '★★★★★',
      '★★★★★★★',
      '★★★★★★★★★'
    ];

    // 获取容器
    const container = document.getElementById('star-container');

    // 生成上半部分蓝色星星
    stars.forEach(star => {
      const div = document.createElement('div');
      div.className = 'star blue';
      div.textContent = star;
      container.appendChild(div);
    });

    // 生成下半部分红色星星（与上半部分对称）
    stars.slice().reverse().forEach(star => {
      const div = document.createElement('div');
      div.className = 'star red';
      div.textContent = star;
      container.appendChild(div);
    });
  </script>
</body>
</html>